import React from 'react';
import {Row,Col, Button, Form, Input,Checkbox } from 'antd';
import hoc from "./hoc";
import Css from '../../../../assets/css/pc/member/register/register.css'

const register = hoc((props)=>{
    return(
        <section className={Css['register']}>
            <div className={Css['registerBox']}>
                <div className={Css['registerTop']}>
                    <img src={require('../../../../assets/images/common/LOGO.png').default} alt=""/>
                </div>
                <div className={Css['registerBottom']}>
                    <div className={Css["registerTitle"]}>注册</div>
                    <div className={Css['registerForm']}>
                        <Form
                            form={props.form}
                            name="basic"
                            autoComplete="off"
                            onFinish={props.onFinish}
                        >
                            <Form.Item
                                name="mobile"
                                rules={[
                                    { required: true, message: '请输入电话' },
                                    {
                                        validator:props.handleCheckPwd.bind(this,'mobile')
                                    }
                                ]}
                                validateTrigger= 'onBlur'
                            >
                                <Input placeholder="请输入电话"/>
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    { required: true, message: '请输入密码' },
                                ]}
                                validateTrigger= 'onBlur'
                            >
                                <Input placeholder="请输入密码"/>
                            </Form.Item>

                            <Form.Item shouldUpdate>
                                {()=>{
                                    return <Row >
                                        <Col span={15}>
                                            <Form.Item
                                                name="smsCode"
                                                noStyle
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: '请输入验证码',
                                                    }
                                                ]}
                                                validateTrigger= 'onBlur'
                                            >
                                                <Input placeholder="请输入验证码" />
                                            </Form.Item>
                                        </Col>
                                        <Col span={8} push={1}>
                                            <Button
                                                className={Css['registerVerificationCodeButton']}
                                                onClick={props.sentVerificationCode}
                                                disabled={
                                                    props.isDisabledVerification
                                                }
                                            >
                                                {props.verification}
                                            </Button>
                                        </Col>
                                    </Row>
                                }}
                            </Form.Item>
                            <Form.Item
                                name="agreement"
                                valuePropName="checked"
                                rules={[
                                    {
                                        validator: (_, value) =>
                                            value ? Promise.resolve() : Promise.reject(new Error('请接受协议')),
                                    },
                                ]}
                            >
                                <Checkbox>
                                    我已认真阅读并接受 <span>法律声明</span>
                                </Checkbox>
                            </Form.Item>
                            <Form.Item shouldUpdate>
                                {()=>{
                                   return <Button
                                       type="primary"
                                       htmlType="submit"
                                       className={Css['registerFormButton']}
                                       loading={props.isLoading}
                                       disabled={
                                           !props.form.isFieldsTouched(true) ||
                                           !!props.form.getFieldsError().filter(({ errors }) => errors.length).length ||
                                           props.isDisabled
                                       }
                                   >
                                        注册
                                    </Button>
                                }}
                            </Form.Item>
                        </Form>
                    </div>

                    <div className={Css['registerFooter']}>
                        <div className={Css['registerFooterList']} onClick={props.goPage.bind(this,'login')}>已有账号，直接登录</div>
                    </div>
                </div>
            </div>
        </section>
    )
})
export default register